<template>
  <div>
    <Teleport to="body">
      <div
          @contextmenu.prevent="closeMenu"
          v-if="isMenuVisible"
          class="context-menu-mask"
      ></div>

      <div
          v-if="isMenuVisible"
          class="context-menu rounded-2 bg-body-tertiary"
          :style="{top: menuTop+'px', left: menuLeft+'px'}"
      >
          <ul>
            <li @click="handleClick('1')" class="rounded-2" >引用 <font-awesome-icon class="fIcon" :icon="['fas', 'reply']" /></li>
            <li @click="handleClick('2')" class="rounded-2" >表情 <font-awesome-icon class="fIcon" :icon="['fas', 'face-smile']" /></li>
            <li class="rounded-2" >复制 <font-awesome-icon class="fIcon" :icon="['fas', 'copy']" /></li>
            <li v-if="isSameU" class="rounded-2" @click="editMsg">修改 <font-awesome-icon class="fIcon" :icon="['fas', 'pen']" /></li>
            <li v-if="isSameU" class="text-danger rounded-2" @click="handleDelete">删除 <font-awesome-icon :icon="['fas', 'circle-xmark']" /></li>
            <li v-if="!isSameU" class="text-danger rounded-2" @click="handleClick('3')">举报 <font-awesome-icon :icon="['fas', 'triangle-exclamation']" /></li>
          </ul>
      </div>
    </Teleport>
  </div>
</template>

<script setup>
import {ref, onMounted, onUnmounted, watch, nextTick} from 'vue';
import {userStore} from "@/stores/userStore.js";
const userAction = userStore()
const isMenuVisible = ref(false);
const menuTop = ref(0);
const menuLeft = ref(0);
const isSameU = ref()

const emit = defineEmits(['editMessage', 'deleteMsg']);

const props = defineProps({
  msgInfo: Object,
})

const openMenu = (position) => {
  if ( window.innerHeight - position.y > 190 ) {
    menuTop.value = position.y;
    menuLeft.value = position.x;
  } else {
    const difference = (190 - (window.innerHeight - position.y))
    menuTop.value = position.y - difference
    menuLeft.value = position.x;
  }

  isMenuVisible.value = true;

  document.addEventListener('click', closeMenu);
};
const closeMenu = () => {
  enableScroll()
  isMenuVisible.value = false;
  document.removeEventListener('click', closeMenu);
};

const handleDelete = () => {
  emit('deleteMsg', props.msgInfo)
}

const handleClick = (option) => {
  closeMenu();
};

const editMsg = async () => {
  emit('editMessage', props.msgInfo.msgIndex);
}

function disableScroll() {
  document.addEventListener('wheel', preventScroll, { passive: false })
  document.addEventListener('touchmove', preventScroll, { passive: false })
}

function enableScroll() {
  document.removeEventListener('wheel', preventScroll)
  document.removeEventListener('touchmove', preventScroll)
}

function preventScroll(e) {
  e.preventDefault()
  e.stopPropagation()
  return void 0;
}

const isSameUser = () => {
  return props.msgInfo.msgInfo.sender_id === userAction.userInfo.id
}

watch(()=>props.msgInfo, (newVal, oldVal)=> {
  isSameU.value = isSameUser()
  console.log(newVal)
  openMenu(newVal.mousePosition)
  disableScroll()
})


onMounted(()=> {
  window.addEventListener('click', ()=>{
    isMenuVisible.value = false;
  })
})

onUnmounted(() => {
  document.removeEventListener('click', closeMenu);
});


</script>

<style>
.context-menu-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}

.context-menu {
  overflow: hidden;
  position: fixed;
  border: 1px solid rgba(204, 204, 204, 0.14);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.context-menu ul {
  list-style: none;
  margin: 0;
  padding: 8px;
}

.context-menu li {
  width: 180px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: none;
  padding: 5px;
  cursor: pointer;
}

.context-menu li:hover {
  background-color: rgba(204, 204, 204, 0.15);
}

@media (max-width: 768px) {
  .context-menu li:hover {
    background-color: initial;
  }
}
</style>